<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>竖式计算</title>
</head>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<link href="css/md.css" rel="stylesheet">
<script language="javascript">
    var index=0;
    var ttsIndex=0;
    var interval;
    var interval0;
    
    function jisuan(){

        //获取计算公式
        var jisuangongshi = document.getElementById("jisuangongshi").value;
        
        //校验计算公式
        var gongshi = jisuangongshi.split("+");
        if(jisuangongshi == "" || jisuangongshi == null){
            alert("请填写计算公式...");
            return;
        }
        var jisuan = "+";
        if(gongshi.length != 2){
            gongshi = jisuangongshi.split("-");
            if(gongshi.length != 2){
                alert("公式错误，请按照规则填入公式，比如：44+32");
                return;
            }else{
                jisuan = "-";
            }
        }
        //校验通过后锁定输入框
        document.getElementById("jisuangongshi").disabled = true;
        //设置竖式计算的样式，（进位 或者借位）

        //替换输出文本
        var outputText = document.getElementById("output").innerHTML;
        document.getElementById("outputOld").innerHTML=outputText;
        if(jisuan== '+'){
            outputText = outputText.replaceAll("+","+").replaceAll("44",gongshi[0]).replaceAll("32",gongshi[1]).replaceAll("76",( Number(gongshi[0])+ Number(gongshi[1])))
            .replaceAll("加","加").replaceAll("四十四",gongshi[0]).replaceAll("三十二",gongshi[1]).replaceAll("七十六",( Number(gongshi[0])+ Number(gongshi[1])));

        }else if (jisuan== '-'){
            outputText = outputText.replaceAll("+","-").replaceAll("44",gongshi[0]).replaceAll("32",gongshi[1]).replaceAll("76",( Number(gongshi[0])- Number(gongshi[1])))
            .replaceAll("加","减").replaceAll("四十四",gongshi[0]).replaceAll("三十二",gongshi[1]).replaceAll("七十六",( Number(gongshi[0])- Number(gongshi[1])));
        }else{
            console.error("错误");
        }
        console.log(outputText);
        document.getElementById("output").innerHTML=outputText;

        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.font="50px Arial";

        if(document.getElementsByName('tts')[0].checked){
            interval0 = setInterval(function(){
                if(ttsIndex == 1){
                    doTTS(document.getElementById("t_w").innerText.trim());
                }else if(ttsIndex == 11){
                    doTTS(document.getElementById("t_w1").innerText.trim());
                }else if(ttsIndex == 21){
                    doTTS(document.getElementById("t_w2").innerText.trim());
                }else if(ttsIndex == 36){
                    doTTS(document.getElementById("t_w4").innerText.trim());
                }else if(ttsIndex >= 50){
                    clearInterval(interval0);
                }
                ttsIndex++;
            }, 1000);;
        }
        interval = setInterval(function() {
            if(index >=0 && index<=10){
                ctx.fillStyle = 'rgb(192, 80, 77)';
                ctx.fillText(document.getElementById("w").innerText.trim().substring(0,index++),10,50);
            }else if (index >10 && index <=20){
                ctx.fillStyle = 'rgb(0, 0, 0)';
                ctx.fillText(document.getElementById("w1").innerText.trim().substring(0,index++),45,100);
            }else if (index >20 && index <=30){
                ctx.fillText(document.getElementById("w2").innerText.trim().substring(0,index++),0,150);
            }else if (index >30 && index <=40){
                ctx.fillText(document.getElementById("w3").innerText.trim().substring(0,index++),0,170);
            }else if (index >40 && index <=50){
                ctx.fillText(document.getElementById("w4").innerText.trim().substring(0,index++),45,210);
            }else if (index >50 && index <=60){
                ctx.fillText(document.getElementById("w4").innerText.trim().substring(0,index++),200,50);
            }else{
                clearInterval(interval);
                return;
            }
    }, 1000);
    }

    function doTTS(ttsText){
            var ttsDiv = document.getElementById('bdtts_div_id');
            var ttsAudio = document.getElementById('tts_autio_id');
            // 这样就可实现播放内容的替换了
            ttsDiv.removeChild(ttsAudio);
            var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
            var sss = '<source id="tts_source_id" src="https://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=3&text='+ttsText+'" type="audio/mpeg">';
            var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
            var au2 = '</audio>';
            ttsDiv.innerHTML = au1 + sss + eee + au2;

            ttsAudio = document.getElementById('tts_autio_id');

            ttsAudio.play();
            
            document.addEventListener("WeixinJSBridgeReady", function () {
                ttsAudio.play();
            }, false);

            document.addEventListener('YixinJSBridgeReady', function() { 
                ttsAudio.play(); 
            }, false); 

            wx.config({
                debug : false, // 这里为false
                appId : 'a', // 以下随意填写即可
                timestamp : (new Date()).getTime(),
                nonceStr : '',
                signature : '',
                jsApiList : ['checkJsApi'] 
            });
            wx.ready(function() {
                ttsAudio.play();
            });
    }

    function qingli(){
        document.getElementById("jisuangongshi").disabled = false;
        document.getElementById("output").innerHTML=document.getElementById("outputOld").innerHTML;
        clearInterval(interval);
        clearInterval(interval0);
        index=0;
        ttsIndex=0;
        var c=document.getElementById("myCanvas");  
        var cxt=c.getContext("2d");  
        c.height=c.height;
    }
    
</script>
<body>
    <div id='write'  class=''><h1 id='竖式计算view'><span>竖式计算</span></h1>
        <p>&nbsp;</p>
        <blockquote><p><span>power by xxx</span></p>
            <p><span>暂时仅支持两位数的加减法</span></p>
        </blockquote>
        <figure>
            <table><thead><tr><th><span>计算公式：<input type="text" name="jisuangongshi" id="jisuangongshi"></span></th><th><span>
                <button onclick="jisuan()" title="计算">计&nbsp;算</button><input type="checkbox" name="tts" id="tts" checked value="tts"><label for="tts">自动讲题</label>
            </span></th><th>
                <span><button onclick="qingli()" title="qingli">清理画板</button></span>
            </th></tr></thead><tbody></tbody></table>
        </figure><hr /><p>&nbsp;</p>
        <p>
            <canvas id="myCanvas" width="800" height="500" style="border:1px solid #d3d3d3;">
                您的浏览器不支持 HTML5 canvas 标签。</canvas>

        </p>
        <p id="output" style="display:none">
            <span id="w">44+32 =</span>
            <span id="t_w">
            44加32=，先写横式四十四加三十二 
            </span>
            <span id="w1">
                44
            </span>
            <span id="t_w1">
                再写竖式四十四
            </span>
            
                <span id="w2">
                +&nbsp;32
                </span>
                <span id="t_w2">
                加三十二，个位与个位对齐，十位与十位对齐
                </span>
                    
                <span id="w3">
                -----------
                </span>
                <span id="w4">
                    76
                </span>
                <span id="t_w4">
                    先计算个位相加二加四等于6，再计算十位相加四十加三十等于70，所以四十四加三十二等于七十六。
                </span>
        </p>

        <p id="outputOld" style="display:none">
            
        </p>
    </div></div>

    

                                 

        <div id="bdtts_div_id">
            <audio id="tts_autio_id" autoplay="autoplay">
                <source id="tts_source_id" src="https://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=9&text=播报内容" type="audio/mpeg">
                <embed id="tts_embed_id" height="0" width="0" src="">
            </audio>
        </div>
</body>
</html>